<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src="js/jquery-3.1.1.js">
        
    </script>
    <style>
    body{
        height: 100%;
        margin: 0;
        overflow: hidden;
    }
        ul,li,h4,p{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .header{
            width: 100%;
            height: 80px;
            background-image: url(images/bg_1.png);
            position: relative;
        }
        .header div{
            width: 150px;
            height: 80px;
            margin-left:150px;
            text-align: center;
        }
        .header div img:nth-of-type(1){
            position: relative;
            top:-10px;
        }
        .header div img:nth-of-type(2){
            position: relative;
            top:-23px;
            left:-15%;
            width: 130%;
        }
        p{
            height: 78px;
            width: 500px;
            border-bottom: 1px dotted lightslategray;
            position: absolute;
            right:0;
            top:0;
        }
        .footer{
            width: 100%;
             position: absolute;
            top:80px;
            background-image: url(images/content-bg.png);
            padding-left: 160px;
        }
       .title{
           color: dodgerblue;
           font-size: 26px;
       }
       h3{
           display: inline-block;
           margin:0 30px;
       }
       .title a{
           font-size: 26px;
           color: dodgerblue;
       }
       .title img{
           position: relative;
           top:10px;
       }
       .out{
           margin: 50px 50px;
       }
       .out li{
           display: flex;
           justify-content: left;

       }
       .out li img{
           width: 30px;
           height: 30px;
           margin: 0 50px;
       }
       h4{
           color: lightgray;
           font-weight: normal;
           font-size: 20px;
       }
       .in h4{
           color: green;
       }
    </style>
</head>
<body>
    <div class="header">
        <div>
            <img src="images/light-top.png" alt="">
            <img src="images/light.png" alt="">
            
        </div>
        <p></p>
    </div>
    <div class="footer">
        <div class="title">
            <h3><a href="">2017年</a></h3>
            <img src="images/clock.png" alt="">
            <h3>我的时间轴</h3>
        </div>
        <div class="content">
           <ul class="out">
               <li>
                   <h4>2月26号</h4>
                   <img src="images/circle.png" alt="">
                   <ul class="in">
                       
                       <h4>我的标题是什么</h4>
                       <li>我的内容1</li>
                       <li>我的内容2</li>
                       <li>我的内容3</li>
                       <li>我的内容4</li>
                       <li>我的内容5</li>
                   </ul>
                </li>
               <li>
                   <h4>2月25号</h4>
                   <img src="images/circle.png" alt="">
                   <ul class="in">
                      
                       <h4>我的标题是什么</h4>
                       <li>我的内容1</li>
                       <li>我的内容2</li>
                       <li>我的内容3</li>
                   </ul>
                </li>
           </ul>
            
        </div>
    </div>
</body>
</html>